import React,{useState} from 'react';
import './page2.scss'

// observe方法，用于对视图数据进行响应式更新
import {observer} from "mobx-react-lite";

// 导入全局状态
// import countStore from "../../store_mobx/count";
// import studentStore from "../../store_mobx/student";
import { countStore,studentStore,useStore } from "../../store_mobx/index"


function Son1({stu,setStu,isEdit,setIsEdit}){
    // 采用hook模式集成模块化store
    console.log(useStore())
    // 修改/添加stu
    const changeStu = (e,type)=>{
        if(type === 'age'){
            e.target.value = +e.target.value
            if(isNaN(e.target.value)){
                e.target.value = ''
            }
        }
        setStu({
            ...stu,
            [type] : e.target.value
        })
    }
    // 取消方法
    const cancal = ()=>{
        setStu({id:'',name:'',age:'',sex:''})
        setIsEdit(false)
    }
    // 添加方法
    const add = ()=>{
        studentStore.addStudent({...stu})
        cancal()
    }
    // 修改方法
    const update = ()=>{
        studentStore.updateStudent({...stu})
    }
    return (
        <div className="son1">
            <table>
                <tbody>
                <tr>
                    <td>学号：</td>
                    <td><input type="text" disabled={isEdit} value={stu.id} onChange={(e)=>changeStu(e,'id')} /></td>
                </tr>
                <tr>
                    <td>姓名：</td>
                    <td><input type="text" value={stu.name} onChange={(e)=>changeStu(e,'name')} /></td>
                </tr>
                <tr>
                    <td>年龄：</td>
                    <td><input type="text" value={stu.age} onChange={(e)=>changeStu(e,'age')} /></td>
                </tr>
                <tr>
                    <td>性别：</td>
                    <td><input type="text" value={stu.sex} onChange={(e)=>changeStu(e,'sex')} /></td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        {
                            isEdit ? <button onClick={update}>修改</button> : <button onClick={add}>添加</button>
                        }
                        <button onClick={cancal}>取消</button>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    )
}

function Page2(props) {
    // 定义学生对象
    let [stu,setStu] = useState({id:'',name:'',age:'',sex:''})
    let [isEdit,setIsEdit] = useState(false)
    const del = (id) => {
        if(window.confirm('确定删除吗？')){
            studentStore.delStudent(id);
        }
    }
    const edit = (item) => {
        setStu({
            ...item
        })
        setIsEdit(true)
    }
    return (
        <div className='page2'>
            <p>数量：{countStore.count}</p>
            <button onClick={countStore.addCount}>count++</button>
            <hr style={{margin:'10px 0'}}/>
            <Son1 stu={stu} setStu={setStu} isEdit={isEdit} setIsEdit={setIsEdit}></Son1>
            <table>
                <thead>
                <tr>
                    <th>学号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>年龄</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {
                    studentStore.students.map(item=>{
                        return (
                            <tr key={item.id}>
                                <td>{item.id}</td>
                                <td>{item.name}</td>
                                <td>{item.sex}</td>
                                <td>{item.age}</td>
                                <td>
                                    <button onClick={()=>{edit(item)}}>编辑</button>
                                    <button onClick={()=>{del(item.id)}}>删除</button>
                                </td>
                            </tr>
                        )
                    })
                }
                </tbody>
                <tfoot>
                <tr>
                    <td colSpan={5}>平均年龄：{studentStore.avgAge}</td>
                </tr>
                </tfoot>
            </table>
        </div>
    );
}

// 使用observer方法返回的组件，在监听到mobx的状态更新后，才会更新视图
export default observer(Page2);
